<template>
    <el-card style="max-width: 480px;margin-top: 18%;margin-left: 25%;">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="车企名称" prop="nickName">
                <el-input v-model="ruleForm.nickName" clearable />
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input v-model="ruleForm.phone" clearable />
            </el-form-item>
            <el-form-item label="企业邮箱" prop="email">
                <el-input v-model="ruleForm.email" clearable />
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="ruleForm.userName" disabled clearable />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" disabled show-password />
            </el-form-item>
            <el-form-item>
                <el-button @click="getCode">生成用户名</el-button>

                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    注册
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios';
import { ElMessage } from 'element-plus'
const ruleForm = reactive({
    userName: '',
    password: '123123',
    nickName: '',
    phone: '',
    email: ''
})
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    userName: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
    nickName: [
        { required: true, message: '车企名称不能为空', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '联系方式不能为空', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '邮箱不能为空', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z]{2,6}$/, message: '邮箱格式不正确', trigger: 'blur' }
    ],
})
const count = ref(0)
function increment() {
    count.value++;
}
const getCode = (() => {
    let code = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    for (let i = 0; i < 8; i++) {
        code += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    increment()
    code=code+count.value
    ruleForm.userName = code
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post('https://localhost:44341/api/app/user-data/account', ruleForm)
                .then(res => {
                    console.log(res.data)
                    if (res.data.code == 500) {
                        ElMessage.error(res.data.message)
                    }
                    else if (res.data.code == 200) {
                        ElMessage.success(res.data.message)
                    }
                    ruleForm.email = ''
                    ruleForm.nickName = ''
                    ruleForm.password = ''
                    ruleForm.phone = ''
                    ruleForm.userName = ''
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>